<template>
	<div>
	  <div class="tabs">
		
		  <div class = "tab" :class="{'active': currentTab==='factoryForm'}" @click = "toggleTab('factoryForm')">新加工厂</div>
		  <div class = "tab" :class="{'active': currentTab==='changePass'}" @click = "toggleTab('changePass')">修改密码</div>

	  </div>
	  <keep-alive>
		  <component :is="currentTab"></component>
	  </keep-alive>
	</div>
</template>

<script>
import factoryForm from '@/page/factory/factoryForm.vue'
import changePass from '@/page/factory/changePass.vue'

export default{
	name: 'app',
	data(){
		return{
			currentTab: 'factoryForm'
		};
	},
	components:{
		factoryForm,
		changePass
	},
	created(){},
	methods:{
		toggleTab: function(tab){
			this.currentTab = tab;
		}
	}
}
	
</script>

<style>

.tabs{
  display: flex;
}
.tab{
  flex: 1;
  text-align: center;
  
  height: 50px;
  line-height: 50px; 
}
.tab.active{
  color: #838B8B;
  border-bottom: 2px solid #838B8B;
}

</style>